<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0"> 
<%@ include file="/common/importJsCss.jsp" %>
  </head>  
 <body data-spy="scroll" data-target=".bs-docs-sidebar">
	<div class="container">
		<div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav affix">
          <li class="active"><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li>
          <li class=""><a href="#code"><i class="icon-chevron-right"></i> Code</a></li>
          <li class=""><a href="#tables"><i class="icon-chevron-right"></i> Tables</a></li>
        </ul>
      </div>
      <div class="span9">
		<section id="typography">
          <h2 id="body-copy">Typography</h2>
          <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
          <div class="bs-docs-example">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
          </div>
          <pre class="prettyprint"><span class="tag">&lt;p&gt;</span><span class="pln">...</span><span class="tag">&lt;/p&gt;</span></pre>
          <hr class="bs-docs-separator">
		</section>
        <section id="code">
          <h2>Code1</h2>
          <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<div class="bs-docs-example">
  For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<pre class="prettyprint linenums"><span class="typ">For</span><span class="pln"> example</span><span class="pun">,</span><span class="pln"> </span><span class="str">&lt;code&gt;&lt;section&gt;</span><span class="pun">&lt;/</span><span class="pln">code</span><span class="pun">&gt;</span><span class="pln"> should be wrapped </span><span class="kwd">as</span><span class="pln"> </span><span class="kwd">inline</span><span class="pun">.</span></pre>

          <h2>Code2</h2>
          <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<div class="bs-docs-example">
  <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 9px;"><span class="tag">&lt;pre&gt;</span>
<span class="pln">  &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;</span>
<span class="tag">&lt;/pre&gt;</span>
</pre>
          <p><span class="label label-info">Heads up!</span> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
          <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
          <hr class="bs-docs-separator">
        </section>

        <section id="tables">
          <h2>Tables1</h2>
          <p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code>&lt;table&gt;</code>.</p>
          <div class="bs-docs-example">
            <table class="table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>
<pre class="prettyprint linenums">
<span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table"</span><span class="tag">&gt;</span>
<span class="pln">  …</span>
<span class="tag">&lt;/table&gt;</span>
</pre>

          <h2>Tables2</h2>
          <p>List of supported table HTML elements and how they should be used.</p>
          <table class="table table-bordered table-striped">
            <colgroup>
              <col class="span1">
              <col class="span7">
            </colgroup>
            <thead>
              <tr>
                <th>Tag</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <code>&lt;table&gt;</code>
                </td>
                <td>
                  Wrapping element for displaying data in a tabular format
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;thead&gt;</code>
                </td>
                <td>
                  Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;tbody&gt;</code>
                </td>
                <td>
                  Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;tr&gt;</code>
                </td>
                <td>
                  Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;td&gt;</code>
                </td>
                <td>
                  Default table cell
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;th&gt;</code>
                </td>
                <td>
                  Special table cell for column (or row, depending on scope and placement) labels<br>
                  Must be used within a <code>&lt;thead&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;caption&gt;</code>
                </td>
                <td>
                  Description or summary of what the table holds, especially useful for screen readers
                </td>
              </tr>
            </tbody>
          </table>
<pre class="prettyprint linenums">
<span class="tag">&lt;table&gt;</span>
<span class="pln">  </span><span class="tag">&lt;caption&gt;</span><span class="pln">...</span><span class="tag">&lt;/caption&gt;</span>
<span class="pln">  </span><span class="tag">&lt;thead&gt;</span>
<span class="pln">    </span><span class="tag">&lt;tr&gt;</span>
<span class="pln">      </span><span class="tag">&lt;th&gt;</span><span class="pln">...</span><span class="tag">&lt;/th&gt;</span>
<span class="pln">      </span><span class="tag">&lt;th&gt;</span><span class="pln">...</span><span class="tag">&lt;/th&gt;</span>
<span class="pln">    </span><span class="tag">&lt;/tr&gt;</span>
<span class="pln">  </span><span class="tag">&lt;/thead&gt;</span>
<span class="pln">  </span><span class="tag">&lt;tbody&gt;</span>
<span class="pln">    </span><span class="tag">&lt;tr&gt;</span>
<span class="pln">      </span><span class="tag">&lt;td&gt;</span><span class="pln">...</span><span class="tag">&lt;/td&gt;</span><span class="pln">      </span><span class="tag">&lt;td&gt;</span><span class="pln">...</span><span class="tag">&lt;/td&gt;</span>
<span class="pln">    </span><span class="tag">&lt;/tr&gt;</span>
<span class="pln">  </span><span class="tag">&lt;/tbody&gt;</span>
<span class="tag">&lt;/table&gt;</span>
</pre>
        </section>
      </div>
      	</div>
     </div> 
  </body>
</html>
